<template>
    <div>
      <h1>加密解密示例</h1>
      <input v-model="originalData" placeholder="输入要加密的数据" />
      <button @click="encryptData">加密</button>
      <p v-if="encryptedData">加密后的数据: {{ encryptedData }}</p>
  
      <input v-model="encryptedData" placeholder="输入要解密的数据" />
      <button @click="decryptData">解密</button>
      <p v-if="decryptedData">解密后的数据: {{ decryptedData }}</p>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from 'vue';
  import cryptoService from '../utils/cryptoservice';
  
  export default defineComponent({
    name: 'CryptoExample',
    setup() {
      const originalData = ref('');
      const encryptedData = ref('');
      const decryptedData = ref('');
  
      const encryptData = () => {
        if (originalData.value) {
          encryptedData.value = cryptoService.encrypt(originalData.value);
        }
      };
  
      const decryptData = () => {
        if (encryptedData.value) {
          decryptedData.value = cryptoService.decrypt(encryptedData.value) || '';
        }
      };
  
      return {
        originalData,
        encryptedData,
        decryptedData,
        encryptData,
        decryptData
      };
    }
  });
  </script>